<template>
  <div class="content">
        <el-form ref="form" :model="form" label-width="80px" :inline="true">
          <el-form-item>
            <el-input clearable v-model="form.name" size="mini" placeholder="请输入学校名称"></el-input>
          </el-form-item>
          <el-button type="primary" size="mini" class="btn" @click="search"><i class="fa fa-search" style="margin-right:5px;"></i>查询</el-button>
          <el-button type="primary" size="mini" @click="editAddOrUpdate(1)"><i class="fa fa-plus" style="margin-right:5px;"></i>新增</el-button>
        </el-form>

    <!-- <el-divider></el-divider> -->

    <template>
      <el-table
        :data="tableData"
        height="470"
        v-loading="loading"
        size="mini"
        style="width: 100%">
        <el-table-column
          prop="id"
          fixed
          label="学校ID"
          width="150">
        </el-table-column>
        <el-table-column
          prop="name"
          fixed
          label="学校名称">
        </el-table-column>
        <el-table-column
          prop="deptCode"
          label="学校代码">
        </el-table-column>
        <el-table-column
          prop="faceGroupNewFlg"
          width="150"
          label="是否添加人像标识">
          <template slot-scope="scope">
            <span>{{scope.row.faceGroupNewFlg==true?"是":"否"}}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="rank"
          label="教育程度">
        </el-table-column>

        <el-table-column
          prop="tag"
          label="教育性质">
        </el-table-column>


        <el-table-column
          fixed="right"
          :label="$t('action.operation')"
          width="210">
          <template slot-scope="scope">
            <el-button
              size="mini"
              @click="editAddOrUpdate(2,scope.row.id)"><i class="fa fa-edit" style="margin-right:5px;"></i>{{$t('action.edit')}}
            </el-button>
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)"><i class="fa fa-trash" style="margin-right:5px;"></i>{{$t('action.delete')}}
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </template>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :page-sizes="[10, 15, 20,50,100]"
      :page-size="everyPageNum"
      layout="total, sizes,prev, pager, next, jumper"
      :total="total">
    </el-pagination>
    <!--新增编辑弹框-->
    <el-dialog :title="updateStatus==1?'创建学校':'编辑学校'" :visible.sync="showEdit" width="40%" v-dialogDrag>
      <editStudent @hideEdit="hideEditStatus" ref="child" :msg="updateStatus"></editStudent>
    </el-dialog>
  </div>
</template>

<script>
  import Cookies from "js-cookie"
  import editStudent from "@/components/OrganizationManagement/edit";

  export default {
    name: "StudentManagement",
    components: {
      editStudent
    },
    data() {
      return {
        url: this.$Config.url,
        showEdit: false,//显示编辑弹框
        updateStatus: 1,//默认是新增
        loading: false,
        total: 1,//总页数
        everyPageNum: 10,//每页多少条
        currentPage: 1,//当前页
        form: {
          statusChecked: '',
          statusValue: '',
          glassId: '',
          classId: '',
          status: '',
          name:''
        },
        tableData: [],
        gradeData: [],//年级列表
        classData: [],//班级列表
        requestHeader: {
          "x-baie-admin-token": Cookies.get("token"),
        }
      }
    },
    mounted() {
      this.common();
    },
    methods: {
      uploadSuccess(response, file, fileList) {
        if (response.code == 200) {
          this.$message({
            message: '导入成功',
            type: 'success'
          });
          this.common(this.currentPage, this.everyPageNum);
        } else {
          this.$message({
            message: '导入失败',
            type: 'error'
          });
        }
      },
      handlePreview(file) {
        console.log(file);
      },
      handleExceed(files, fileList) {
        this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
      },
      search() {
        this.common(this.currentPage, this.everyPageNum,this.form.name);
      },
      handleDelete(index, row) {
        this.$confirm('您确认要删除该学校?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.deleteStudent(row.id);
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },
      deleteStudent(id) {
        const that = this;
        this.$axios.post(that.url + '/admin/dept/delete/{id}', that.$qs.stringify({id}), {
          headers: {
            "x-baie-admin-token": Cookies.get("token")
          }
        })
          .then(function (res) {
            if (res.data.code == 200) {
              that.$message({
                type: 'success',
                message: '删除成功!'
              });
              that.common(that.currentPage, that.everyPageNum);
            } else {
              that.$message({
                message: res.data.msg,
                type: 'warning'
              });
            }

          })
          .catch(function (error) {
            console.log(error);
          });
      },
      editAddOrUpdate(status, id) {//新增或编辑
        /**
         * 1是新增
         * 2是编辑
         */
        this.showEdit = true;
        if (status == 1) {//新增
          this.updateStatus = 1;
          setTimeout(() => {
            this.$refs['child'].resetForm('ruleForm');
          }, 0)
        } else {//编辑
          this.updateStatus = 2;
          setTimeout(() => {
            this.$refs['child'].resetData(id);
          }, 0)
        }
      },
      handleSizeChange(val) {
        //   每页多少条
        this.everyPageNum = val;
        this.common(this.currentPage, val);
      },
      handleCurrentChange(val) {
        this.currentPage = val;
        this.common(val, this.everyPageNum);
      },
      hideEditStatus(status) {
        this.showEdit = false;
        this.common(this.currentPage, this.everyPageNum);
      },
      common(pageNo = 1, pageSize = 10,name="") {
        const that = this;
        that.loading = true;
        this.$axios.get(that.url + '/admin/dept/page', {
          params: {
            pageNo,
            pageSize,
            name
          },
          headers: {
            "x-baie-admin-token": Cookies.get("token")
          }
        })
          .then(function (res) {
            that.loading = false;
            if (res.data.code == 200) {
              that.tableData = res.data.data.records;
              that.total = res.data.data.total;
            } else {
              that.$message({
                message: res.data.msg,
                type: 'warning'
              });
            }

          })
          .catch(function (error) {
            that.loading = false;
            console.log(error);
          });

      },
      handleClick(row) {
        console.log(row);
      }
    }
  }
</script>

<style scoped lang="scss">
  .el-button{
    margin-top: 7px;
  }
  .upload {
    display: inline-block;
  }

  .el-pagination {
    float: right;
    margin: 20px 10px;
  }

  .button_list {
    margin-bottom: 10px;
  }

  .content {
    text-align: left;
  }

  .el-divider {
    margin: 10px 0;
  }

  .btn {
    margin-top: 6px;
  }

  .el-form-item {
    margin-bottom: 0;
  }
</style>
